<template>
  <vxe-button transfer icon="vxe-icon-menu">
    <template #default>列操作</template>
    <template #dropdowns>
      <div class="listwrap">
        <div v-for="(item, index) in list" :key="item.name" class="list-group">
          <div class="list-group-item">
            {{ item.name }}
            <div class="icon-group" @click.stop>
              <i
                class="vxe-icon-fixed-left"
                v-if="item.fixed !== 'left'"
                title="左冻结"
                @click="columnAction('left', item.field)"
              ></i>
              <i
                class="vxe-icon-fixed-left-fill"
                v-if="item.fixed == 'left'"
                title="左解冻"
                @click="columnAction('left', item.field)"
              ></i>
              <i
                class="vxe-icon-fixed-right"
                v-if="item.fixed !== 'right'"
                title="右冻结"
                @click="columnAction('right', item.field)"
              ></i>
              <i
                class="vxe-icon-fixed-right-fill"
                v-if="item.fixed == 'right'"
                title="右解冻"
                @click="columnAction('right', item.field)"
              ></i>
              <i
                class="vxe-icon-eye-fill"
                v-if="!item.hide"
                title="隐藏"
                @click="columnAction('visibleToggle', item.field)"
              ></i>
              <i
                class="vxe-icon-eye-fill-close"
                v-else
                title="显示"
                @click="columnAction('visibleToggle', item.field)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </template>
  </vxe-button>
</template>

<script lang="ts" setup>
const props = defineProps<{ columns: any[] }>();
const emit = defineEmits(['columnAction']);
const list = ref<{ name: string; id: number; fixed?: string; hide?: boolean; field: string }[]>([]);
const dataMap = new Map();
const initData = () => {
  dataMap.clear();
  const cloenData = JSON.parse(JSON.stringify(props.columns));
  for (let i = 0; i < cloenData.length; i++) {
    dataMap.set(cloenData[i].title, cloenData[i]);
  }
  list.value = cloenData
    .filter((item: any) => item.title && !['操作'].includes(item.title))
    .map((item: any, index: number) => {
      return {
        name: item.title,
        index,
        fixed: item.fixed,
        hide: item.hide || false,
        field: item.field,
      };
    });
};

const columnAction = (action: string, field: string) => {
  emit('columnAction', action, field);
};
onMounted(() => {
  initData();
});

watch(
  () => props.columns,
  value => {
    console.log(value);
    initData();
  },
  {
    deep: true,
  }
);
</script>

<style lang="less" scoped>
.listwrap {
  padding: 10px 0px;
  .list-group {
    padding: 0px 15px;
    .list-group-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 220px;
      .icon-group {
        display: flex;
        :deep(i) {
          font-size: 14px;
          cursor: pointer; 
          pointer-events: all;
          margin-right: 10px;
        }
      }
    }
  }
}
.my-fc-footer {
  text-align: right;
  padding-top: 10px;
}
.my-fc-footer button {
  padding: 0 15px;
  margin-left: 15px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
